import Head from 'next/head'
import styles from './Guide.module.css'
import { Carousel, Radio } from 'antd'
import { Component } from 'react'

class Guide extends Component {

  render() {
    return (
      <div className={styles.container}>
        <Head>
          <title>YZH</title>
          <link rel="icon" href="/favicon.ico" />
        </Head>

        <main className={styles.main}>
          <div className={styles.header}>
            <h1 className={styles.title}>
              Welcome to <a href="##">justin.js</a>
            </h1>

            <p className={styles.description}>
              Quickly get started！
        <code className={styles.code}>coding...</code>
            </p>
          </div>

          <div className={styles.grid}>
            <a href="/docs" className={styles.card}>
              <h3>Document &rarr;</h3>
              <p>All kinds of examples in this site are documented. Get you started quickly.</p>
            </a>

            <a href="/note" className={styles.card}>
              <h3>Note &rarr;</h3>
              <p>Record the problems and solutions encountered in the development process, and organize the technical knowledge reserve.</p>
            </a>

            <a
              href="/example"
              className={styles.card}
            >
              <h3>Examples &rarr;</h3>
              <p>It has a rich technical framework to facilitate rapid development and learning</p>
            </a>

            <a
              href="/about"
              className={styles.card}
            >
              <h3>About &rarr;</h3>
              <p>Focus on front-end development, provide product development services, help from nothing to have.</p>
            </a>
          </div>
        </main>

        <footer className={styles.footer}>
          <p>
            Powered by{' '}
            <img src="/image/nlx.png" alt="logo" className={styles.logo} />
          </p>
        </footer>
      </div>
    )
  }
}

export default Guide